<template>
  <div class="usersDetail">
    <h3 class="mainTitle">基本信息</h3>
    <el-form ref="basicForm" label-width="100px" label-position="left">
      <el-form-item label="角色" prop="role">
        <el-select v-model="usersObj.role" style="width: 400px;">
          <el-option :value="0" label="--" />
        </el-select>
      </el-form-item>
      <el-form-item label="绑定手机" prop="telephone">
        <el-input v-if="action == 'new'" v-model="usersObj.telephone" placeholder="必填，请输入，少于20个数字" maxlength="20" style="width: 400px;" />
        <span v-else>{{ usersObj.telephone }}</span>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-if="action == 'new'" v-model="usersObj.name" placeholder="必填，请输入，少于5个中文字" maxlength="5" style="width: 400px;" />
        <span v-else>{{ usersObj.name }}</span>
      </el-form-item>
      <el-form-item label="所属院系" prop="department">
        <el-select v-model="usersObj.department" style="width: 400px;">
          <el-option :value="0" label="--" />
        </el-select>
      </el-form-item>
      <el-form-item label="所属入学年份" prop="inSchoolYear">
        <el-select v-model="usersObj.inSchoolYear" style="width: 400px;">
          <el-option :value="0" label="--" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100px;">确定</el-button>
        <el-button style="width:100px;" @click="handleCancelClick">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      action: 'new',
      usersObj: {}
    }
  },
  methods: {
    handleCancelClick() {
      this.$router.push({ path: './list' })
    }
  }
}
</script>

<style lang="scss" scoped>
  .usersDetail {
    padding: 30px;

    .modelTitle {
      color: #222;
      font-weight: bold;
      font-weight: 14px;
      margin-bottom: 20px;
    }
  }
  .el-button:focus, .el-button:hover {
    color: #0C66FF;
    border-color: #0C66FF;
    background-color: #fff;
  }
  .el-button--primary {
    color: #FFF;
    background-color: #0C66FF;
    border-color: #0C66FF;
  }
  .el-button--small {
    border-radius: 8px;
  }
  .el-button--primary:hover {
    color: #fff;
    background-color: #0951CC;
    border-color: #0951CC;
  }
</style>
